<template>
  <div>
    <!-- 头部部分 -->
    <div class="tong topbox duiq jus">
        <div class="tong">
            <van-icon class="duiq" name="delete-o" />
            <div class="zi">清空未读</div>
        </div>
        <div class="dui">消息</div>
        <div>推送</div>
        <div>
            <van-icon name="plus" />
        </div>
    </div>
    <!-- 头部部分 -->


    <!-- 搜索框区域 -->
    <div>
        <van-search v-model="value" placeholder="请输入搜索关键词" />
    </div>
    <!-- 搜索框区域 -->

    <!-- 主体区域 -->
    <div>
        <div class="zhuti tong jus">
            <div class="tong zuoy">
                <div>
                    <van-image
                    round
                    width="50px"
                    height="50px"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                    />
                </div>
                <div>
                    <div>张美丽</div>
                    <div class="col">在吗在吗</div>
                </div>
            </div>
            <div class="col">下午2:22</div>
        </div>

        <div class="zhuti tong jus">
            <div class="tong zuoy">
                <div>
                    <van-image
                    round
                    width="50px"
                    height="50px"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                    />
                </div>
                <div>
                    <div>张美丽</div>
                    <div class="col">在吗在吗</div>
                </div>
            </div>
            <div class="col">下午2:22</div>
        </div>
    </div>
    <!-- 主体区域 -->


  </div>
</template>

<script>
export default {
    data(){
        return{
            value:''
        }
    }

}
</script>

<style lang="less" scoped>
.zi{
    font-size: 14px;
    color: #BDBDBD ;
}
.tong{
    display: flex;
}
.dui{
    // margin-right: 20px;
    color: skyblue;
    font-size: 18px;
}
.topbox{
    border-bottom: 1px solid #BDBDBD;
    width: 390px;
    height: 60px;
}
.duiq{
    height: 60px;
    line-height: 60px;
}
.jus{
    justify-content: space-between;
}
.zhuti{
    width: 370px;
    margin: 20px auto;
    border-bottom: 1px solid #BDBDBD ;
    // background-color: red;
}
.zuoy{
    width: 185px;
}

.col{
    color: #BDBDBD;
}
</style>